<template>
    <div :class="show?'blur-content':''">
        <div class="page ">
            <div class="banner" @click="show_level(0,11)">
                <img :src="banner_path"/>
            </div>
            <div class="touch-long" v-on:touchstart="touch_start(0)" v-on:touchend="touch_end(0)"
                 @click="close_badge_show(0)">
                <grid :show-lr-borders="false" :show-vertical-dividers="false" :cols="4">
                    <grid-item :label="item.category_name" v-for="item in list_cate"
                               @on-item-click="delete_cate(item.id)"
                               v-if="badge_show">
                        <badge text="X" v-show="badge_show"></badge>
                        <img slot="icon" :src="domain + item.icon">
                    </grid-item>
                    <grid-item :label="item.category_name" @on-item-click="show_level(item.id, item.category_name)"
                               v-else>
                        <img slot="icon" :src="domain + item.icon">
                    </grid-item>
                    <grid-item label="" @on-item-click="add(1)" v-show="is_sys" class="borderradius">
                        <img slot="icon" src="../assets/add.png">
                    </grid-item>
                </grid>
            </div>
            <div class="dialog-show">

                <x-dialog hide-on-blur v-model="show" mask-transition="fade">
                    <div class="" v-on:touchstart="touch_start(1)" v-on:touchend="touch_end(1)"
                         @click="close_badge_show(1)">
                        <divider>{{level_title}}</divider>
                        <grid :show-lr-borders="false" :show-vertical-dividers="false" :cols="3">
                            <grid-item :label="item.name" v-for="item in list_show_level"
                                       @on-item-click="delete_mirco(item.agent_id)" v-if="badge_show_le">
                                <badge text="X" v-show="badge_show_le"></badge>
                                <img slot="icon" :src="item.app_icon">
                            </grid-item>
                            <grid-item :label="item.name" @on-item-click="open_url(item.homepage_link)" v-else>
                                <badge text="X" v-show="badge_show_le"></badge>
                                <img slot="icon" :src="item.app_icon">
                            </grid-item>
                            <grid-item label="" @on-item-click="add(2)" v-show="is_sys">
                                <img slot="icon" src="../assets/add.png">
                            </grid-item>

                        </grid>
                    </div>

                </x-dialog>
                <x-dialog hide-on-blur v-model="le_show" @on-hide="hide_show" mask-transition="fade">
                    <divider>新增应用</divider>
                    <grid :show-lr-borders="false" :show-vertical-dividers="false" :cols="3">
                        <grid-item :label="item.name" v-for="item in list_show_level_add"
                                   @on-item-click="select_level(item.agent_id, item.app_icon)">
                            <img slot="icon" :src="item.app_icon">
                        </grid-item>
                    </grid>
                </x-dialog>
                <x-dialog hide-on-blur v-model="add_show" mask-transition="fade">
                    <divider>新增类别</divider>
                    <group class="paddings">
                        <x-input title="名称" v-model="category_name"></x-input>
                        <div class="vux-x-input weui-cell">
                            <div class="weui-cell__hd">
                                <label for="vux-x-input-gl2fq" class="weui-label" style="width: 3em;">图标</label>
                            </div>
                            <div class="weui-cell__bd weui-cell__primary">
                                <input accept="image/*" @change="check_file($event)" :value="files" type="file"
                                       class="weui-input">
                            </div>
                        </div>
                        <x-button mini type="warn" @click.native="add_cate">提交</x-button>
                    </group>
                </x-dialog>
            </div>

            <loading :show="loading" text="loading"></loading>
            <toast v-model="toast" type="text">{{toastText}}</toast>
        </div>
    </div>
</template>

<script>
    import {
        Badge,
        Card,
        Divider,
        Grid,
        GridItem,
        Group,
        Loading,
        Toast,
        TransferDomDirective as TransferDom,
        XButton,
        XDialog,
        XInput
    } from 'vux'
    import {addCate, addMicro, deleteCate, deleteMicro, GetCategory, getConfig, GetMicro, GetUser} from '../api'


    export default {
        name: 'Index',
        components: {
            Grid, GridItem, XDialog, Divider, Card, Badge, Loading, Toast, XInput, Group, XButton
        },
        directives: {
            TransferDom
        },
        data() {
            return {
                domain: '',
                // domain: '//api.sikutech.com',
                banner_path: require('../assets/banner.jpg'),
                loading: false,
                toast: false,
                toastText: '',
                touch_time: 0,
                touch_time_le: 0,
                touch_time_fac: 0,
                show: false,
                le_show: false,
                badge_show: false,
                badge_show_le: false,
                user: {},
                list_cate: {},
                is_sys: false,
                list_show_level: 3,
                level_title: '',
                list_show_level_add: {},
                category_id: 0,
                add_show: false,
                category_name: '',
                formData: '',
                files: '',
                showModal: false,
                level: false
            }
        },
        created() {
            let that = this
            this.get_cate()
            this.getUserInfo()

        },
        methods: {
            open_url: function (url) {
                dd.biz.util.openLink({
                    url: url,//要打开链接的地址
                    onSuccess: function (result) {
                        /**/
                    },
                    onFail: function (err) {
                    }
                })
            },
            upload_file: function () {
                let that = this;
                dd.biz.util.uploadImage({
                    compression: true,//(是否压缩，默认为true)
                    multiple: false, //是否多选，默认false
                    max: 1, //最多可选个数
                    quality: 50, // 图片压缩质量,
                    resize: 50, // 图片缩放率
                    onSuccess: function (result) {
                        //onSuccess将在图片上传成功之后调用
                        console.log(result);
                        addCate({
                            category_name: that.category_name,
                            user_id: that.user.userid,
                            icon_path: result[0]
                        }, that).then(res => {
                            that.toastText = '增加成功！';
                            that.toast = true;
                            that.get_cate();
                            that.add_show = false
                        })
                    },
                    onFail: function (err) {
                    }
                })
            },
            badge_show_leccc: function () {
                this.badge_show_le = !this.badge_show_le
            },
            badge_showccc: function () {
                this.badge_show = !this.badge_show
            },
            get_cate: function () {
                GetCategory({}, this).then(res => {
                    this.list_cate = res.category_list;
                    this.banner_path = this.domain + res.banner_path
                })
            },
            add_cate: function () {
                if (this.formData.length === '') {
                    this.toastText = '请上传图片';
                    this.toast = true;
                    return
                }
                if (this.category_name === '') {
                    this.toastText = '请填写名称';
                    this.toast = true;
                    return
                }
                this.formData.append('category_name', this.category_name);
                this.formData.append('user_id', this.user.userid);
                addCate(this.formData, this).then(res => {
                    this.toastText = '增加成功！';
                    this.toast = true;
                    this.get_cate();
                    this.add_show = false
                })
            },
            check_file: function (e) {
                let deviceFile = e.target.files;
                console.log(deviceFile[0].size);
                if (deviceFile[0].size > 110207) {
                    this.toastText = '图标不超过100K';
                    this.toast = true;
                    return
                }
                this.formData = new FormData();
                this.formData.append('icon_path', deviceFile[0])

            },
            delete_cate: function (id) {
                deleteCate({user_id: this.user.userid, category_id: id}, this).then(res => {
                    this.toastText = '删除成功！';
                    this.toast = true;
                    this._delete_cate(id);
                    //this.close_badge_show(0)
                })
            },
            delete_mirco: function (id) {
                if (!this.badge_show_le) return;
                deleteMicro({user_id: this.user.userid, agent_id: id}, this).then(res => {
                    this.toastText = '删除成功！';
                    this.toast = true;
                    this._delete_mirco_(id)
                })
            },
            select_level: function (id, icon_path) {
                addMicro({
                    user_id: this.user.userid,
                    agent_id: id,
                    category_id: this.category_id,
                    icon_path: icon_path
                }, this).then(res => {
                    this.toastText = '增加成功！';
                    this.toast = true
                })
            },
            hide_show: function () {
                GetMicro({category_id: this.category_id, user_id: this.user.userid}, this).then(res => {
                    this.list_show_level = res
                })
            },
            add: function (type) {
                if (type === 1) {
                    if (!this.is_sys) return;
                    this.category_name = '';
                    this.files = '';
                    this.add_show = !this.add_show
                } else {
                    this.show_level(0)

                }
            },
            show_level: function (id, name = '') {
                if (this.badge_show) return;
                this.badge_show_le = false;
                if (name !== '') {
                    this.level_title = name
                }
                GetMicro({category_id: id, user_id: this.user.userid}, this).then(res => {
                  console.log(res)
                    if (id !== 0) {
                        for (var i in res) {
                            res[i]['homepage_links'] = res[i]['homepage_link']
                        }
                        this.list_show_level = res;
                        this.show = true;
                        this.category_id = id
                    } else {
                        this.list_show_level_add = res;
                        this.le_show = true
                    }


                })
            },
            getUserInfo: function () {
                let that = this;
                dd.ready(function () {
                    dd.runtime.permission.requestAuthCode({
                        // corpId: "dinge55ad6668bf5dad635c2f4657eb6378f",
                        corpId: "ding3901f11eb913a59735c2f4657eb6378f",
                        onSuccess: function (result) {
                            GetUser({code: result.code}, that).then(res => {
                                //res.is_sys = false
                                that.user = res;
                                if(res.is_sys && res.sys_level==1)
                                {
                                  that.is_sys = res.is_sys
                                }
                                //that.is_sys = true
                                getConfig({url: location.href.replace('#/', '')}, that).then(data => {

                                    dd.ready(function () {
                                        let config = {
                                            //agentId: 186271658, // 必填，微应用ID
                                            agentId: data.agentId,
                                            corpId: data.corpId,//必填，企业ID
                                            timeStamp: data.timeStamp, // 必填，生成签名的时间戳
                                            nonceStr: data.nonceStr, // 必填，生成签名的随机串
                                            signature: data.signature, // 必填，签名
                                            type: 0,   //选填。0表示微应用的jsapi,1表示服务窗的jsapi；不填默认为0。该参数从dingtalk.js的0.8.3版本开始支持
                                            jsApiList: [
                                                'runtime.info',
                                                'biz.contact.choose',
                                                'device.notification.confirm',
                                                'device.notification.alert',
                                                'device.notification.prompt',
                                                'biz.ding.post',
                                                'biz.util.openLink',
                                            ] // 必填，需要使用的jsapi列表，注意：不要带dd。
                                        };
                                        console.log(config);
                                        dd.config(config);
                                        dd.error(function (error) {
                                            console.log(error)
                                        });
                                    })

                                })
                            })
                        },
                        onFail: function (err) {
                        }
                    })
                })
            },
            touch_start: function (type) {
                let that = this;
                this.touch_time_fac = setInterval(function () {
                    if (type === 1) {
                        that.touch_time_le += 1;
                        if (that.touch_time_le >= 2) that.badge_show_le = true
                    } else {
                        if (that.is_sys) {
                            that.touch_time += 1;
                            if (that.touch_time >= 2) {
                              console.log(that.touch_time);
                              that.badge_show = true
                            }
                        }
                    }

                }, 1000);
                console.log(this.touch_time)
            },
            touch_end: function (type) {
                if (!this.is_sys) return;
                clearTimeout(this.touch_time_fac);
                if (type === 1) {
                    if (this.touch_time_le > 0) {
                        this.touch_time_le = 0;
                        this.badge_show_le = true
                    }
                } else {
                    if (this.touch_time >= 1) {
                        this.touch_time = 0;
                        this.badge_show = true
                    } else {
                        //this.close_badge_show(0)
                    }
                }
            },
            close_badge_show: function (type) {
                if (type === 1) {
                    if (this.badge_show_le) this.badge_show_le = false
                } else {
                    if (this.badge_show) this.badge_show = false
                }

            },
            _delete_mirco_: function (id) {
                GetMicro({category_id: this.category_id, user_id: this.user.userid}, this).then(res => {
                    this.list_show_level = res
                    this.badge_show_le = true
                })
                /*
                let list = [];
                for(var i in this.list_show_level) {
                  if(this.list_show_level[i]['agent_id'] != id) {
                    list[i] = this.list_show_level[i]
                  }
                }
                console.log(list)
                this.list_show_level = list*/
            },
            _delete_cate: function (id) {
                this.get_cate()
                /*
                let list = [];
                for(var i in this.list_cate) {
                  if(this.list_cate[i]['id'] != id) {
                    list[i] = this.list_cate[i]
                  }
                }
                this.list_cate = list*/
            },
            showModalfalse: function() {
              console.log(33333333333333333333)
              this.showModal = false
            }
        }
    }
</script>
<style lang="less" scoped>
    @import '~vux/src/styles/close';

    @media screen and (min-width: 1024px) {
        .weui-dialog {
            width: 35%;
        }
    }

    .vux-close {
        margin-top: 8px;
        margin-bottom: 8px;
    }
</style>
